
<style
    type="text/css">


  .goodsclass {
    width: 1198px;
    margin: 0 auto;
    margin-bottom: 50px;
    background: #fff;
    min-height: 300px;
    border: 1px solid #e8ebed;
    padding-bottom: 50px
  }

  .classtab {
    width: 232px;
    margin: 0 auto;
    margin-top: 49px;
    height: 35px
  }

  .classtab a {
    width: 116px;
    height: 35px;
    text-align: center;
    font-size: 16px;
    line-height: 35px;
    background: #eaeaea;
    float: left;
    color: #6d6d6d;
    border-radius: 3px
  }

  .classtab a:hvoer {
    color: #6d6d6d
  }

  .classtab a.all {
    border-radius: 3px 0 0 3px
  }

  .classtab a.curr {
    color: #fff;
    background: #eb4441
  }

  .classtab a.curr:hover {
    color: #fff
  }
  .public-head-layout .logo-test {
    color: #FF9F00
  }

  .public-nav-layout.category .sub-class {
    border-color: #FF9F00;
  }

  .nc-appbar-tabs a.compare {
    display: none !important;
  }

  .classlst {
    width: 1112px;
    margin: 0 auto;
    margin-top: 14px;
    padding-bottom: 14px
  }

  .classlst .classtit {
    height: 80px;
    line-height: 42px;
    font-size: 16px;
    color: #3c3c3c;
    border-bottom: 2px solid #e8ebed;
    position: relative
  }

  .classlst .classtit span {
    position: absolute;
    height: 44px;
    bottom: -2px;
    border-bottom: 2px solid #747474;
    padding-right: 24px
  }

  .classcon dl {
    overflow: hidden;
    zoo: 1;
    padding: 9px 0;
    border-bottom: 1px dotted #e8e8e8
  }

  .classcon dl dt {
    float: left;
    width: 62px;
    line-height: 26px;
    color: #a67171;
    text-align: right
  }

  .classcon dl dd {
    float: right;
    width: 1004px;
    line-height: 26px
  }

  .classcon dl dd a {
    margin-right: 26px
  }

  .brandlog {
    overflow: hidden;
    zoom:1;width: 1080px;
    margin: 0 auto;
    margin-top: 33px;
    border-bottom: 1px solid #e8ebed;
    padding-bottom: 36px
  }

  .brandlog dl {
    float: left;
    width: 150px;
    padding: 10px 2px
  }

  .brandlog dl dt a:hover {
    opacity: .8;
    filter: alpha(opacity=80)
  }

  .brandlog dl dd {
    text-align: center;
    line-height: 32px
  }

  .brandlog dl dd a {
    color: #999
  }

  .brandtxt {
    width: 1081px;
    margin: 0 auto;
    margin-top: 26px
  }

  .brandlog dl dd a:hover {
    color: #eb4441
  }

  .brandtxt dl {
    padding-bottom: 20px
  }

  .brandtxt dl dt {
    color: #3c3c3c;
    font-size: 16px;
    line-height: 54px
  }

  .brandtxt dl ul {
    padding-bottom: 1px
  }

  .brandtxt dl ul li {
    float: left;
    display: inline;
    width: 134px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #ededed;
    margin-bottom: -1px;
    margin-right: -1px;
    text-align: center
  }

  .brandtxt dl ul li a {
    color: #6d6d6d;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden
  }

  .brandtxt dl ul li a:hover {
    color: #eb4441
  }

  .relative {
    position: relative
  }

  .brands-layer .left {
    float: left
  }

  .brands-layer .right {
    float: right;
    color: #6d6d6d
  }

  .brands-layer {
    background: url(../kuajing_images/brandBG.png) no-repeat;
    height: 189px;
    left: 116px;
    position: absolute;
    top: -100px;
    width: 363px;
    z-index: 100
  }

  .brands-layer .layer-content {
    padding: 8px 26px 8px 35px
  }

  .relative .brands-layer-right {
    background: url(../kuajing_images/brandBG.png) 0 -190px no-repeat;
    left: -340px;
    top: -100px
  }

  .brands-layer-right .layer-content {
    padding: 8px 38px 8px 20px
  }

  .brands-layer .layer-content .title {
    font-size: 16px;
    color: #3c3c3c;
    line-height: 40px;
    padding-bottom: 5px;
    text-align: left
  }

  .brands-layer .layer-content .desc {
    margin: 5px 0;
    overflow: hidden;
    height: 112px
  }

  .brands-layer .layer-content .desc .right {
    width: 180px;
    line-height: 22px;
    text-align: left
  }
</style>
<div class="goodsclass">
  <div class="classtab"><a href="javascript:void(0);" class="curr all">商品分类</a><a
        href="<?php echo urlshop('brand'); ?>">全部品牌</a></div>
  <div
      class="classlst"><?php if (!empty($output['show_goods_class']) && is_array($output['show_goods_class'])) { ?><?php foreach ($output['show_goods_class'] as $key => $gc_list) { ?>
      <div class="classtit"><span><a
              href="<?php echo urlShop('search', 'index', array('cate_id' => $gc_list['gc_id'])); ?>"><?php echo $gc_list['gc_name']; ?></a></span>
      </div>
      <div
          class="classcon"><?php if (!empty($gc_list['class2'])) { ?><?php foreach ($gc_list['class2'] as $gc_list2) { ?>
          <dl>
          <dt>
            <a href="<?php echo urlShop('search', 'index', array('cate_id' => $gc_list2['gc_id'])); ?>"><?php echo $gc_list2['gc_name']; ?></a>
          </dt>
          <dd><?php if (!empty($gc_list2['class3'])) { ?><?php foreach ($gc_list2['class3'] as $key => $gc_list3) { ?>
              <a
              href="<?php echo urlShop('search', 'index', array('cate_id' => $gc_list3['gc_id'])); ?>"><?php echo $gc_list3['gc_name']; ?></a><?php } ?><?php } ?>
          </dd></dl><?php } ?><?php } ?></div>        <?php } ?><?php } ?></div>
</div></div>
<script src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery.masonry.js"></script>
<script>$(function () {
    $("#categoryList").masonry({itemSelector: '.classes'});
  }
